<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>用户注册</title>
		<link rel="icon" href="img/logo/logo.jpg" sizes="32*32">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.sever {
				height: 360px;
				width: 100%;
				margin-top: 80px;
				background-image: url(img/reg/1.reg_background.jpeg);
				background-size: 100% auto;
				background-position: 0px -950px;
				padding-top: 40px;
				/* background-repeat: no-repeat; */
				/* background-color: rgba(244, 244, 244, 1); */
			}

			.center {
				width: 500px;
				background-color: rgba(0,0,0,.6);
				border: solid 1px rgba(0, 0, 0, 0);
				border-radius: 20px;
				margin: 0 auto;
				
			}

			/* 新用户注册文字样式 */
			.title>.title_left {
				display: block;
				box-sizing: border-box;
				padding: 0 0 0 100px;
				float: left;
				/* padding-right: 200px; */
				width: 275px;
				height: 27px;
				font-size: 20px;
				margin: 20px 0;
				color: white;

			}

			/* 直接登录文字样式 */
			.center>.title>.title_right {
				display: block;
				box-sizing: border-box;
				float: right;
				padding: 10px 0 0 0;
				width: 50px;
				height: 27px;
				/* padding-left: 200px; */
				font-size: 10px;
				margin: 20px 175px 20px 0;
				/* vertical-align: bottom; */
				text-decoration: none;
				color: rgba(255,255,255,1);
				
			} 

			.center>.reg_input>.tips_top {
				display: block;
				box-sizing: border-box;
				padding: 3px 0;
				width: 80px;
				float: left;
				height: 30px;
				text-align: right;
				/* vertical-align: middle; */
				margin: 5px 0 5px 15px;
				color: white;
			}

			.center>.reg_input>input {
				display: block;
				width: 166px;
				float: left;
				padding: 5px 0 5px 3px;
				margin: 5px 0;
				outline: none;
			}

			.center>.reg_input>.tips_down {
				display: block;
				box-sizing: border-box;
				font-size: 13px;
				padding: 5px 0;
				border: 1px solid rgba(0, 0, 0, 0);
				width: 198px;
				float: left;
				height: 30px;
				margin: 5px 0 5px 10px;
				color: white;
			}

			.title {
				height: 50px;
			}
			
			.reg_btn>.btn{
				display: block;
				float: left;
				margin: 10px 60px 30px 100px;
				width: 160px;
				height: 26px;
			}

			/* 去除浮动影响 */
			.center::after {
				content: '';	
				display: block;
				clear: both;
			}
			.logo>img{
				position: relative;
				display: block;
				float: left;
				width: 90px;
				top: 40px;
				left: 80px;
			}
			.logo_all>.logo_name{
				display: block;
				/* float: left; */
				width: 500px;
				position: relative;
				top: 60px;
				left: 90px;
				font-size: 50px;
				font-family: '楷体';
			}
			.logo_all>.logo_reg{
				display: block;
				width: 500px;
				position: relative;
				font-size: 30px;
				left: 300px;
				top: 13px;
				font-size: 40px;
				font-family: '宋体';
			}
			
			.reg_suc{
				box-sizing: border-box;
				width: 385px;
				height: 160px;
				background-color: #fff;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				padding: 30px;
				border: 1px solid rgba(0,0,0,0);
				border-radius: 6px;
			}
			.reg_suc .reg_title{
				height: 30px;
				margin: 0 auto 10px;
				text-align: center;
			}
			.reg_suc .reg_body{
				display: block;
				margin: 0 auto 10px;
				text-align: center;
			}
			.reg_suc .reg_a{
				display: block;
				width: 100%;
				text-decoration: none;
			}
			.reg_suc .reg_a .reg_btn{
				display: block;
				margin: 10px auto 0;
				text-align: center;
				padding: 3px 10px;
			}
			.mask{
				background-color: rgba(0,0,0,.7);
				/* 使用固定定位让元素盛满全屏 */
				position: fixed;			
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="logo_all">
			<div class="logo"><img src="img/logo/logo.jpg"></div>
			<h1 class="logo_name">小俊美食</h1>
			<span class="logo_reg">欢迎注册:</span>
		</div>
		
		<div class="sever">
			<div class="center">
				<div class="title">
					<span class="title_left">新用户注册</span>
					<a href="login.html" class="title_right">直接登录</a>
				</div>
				<div class="reg_input">
					<span class="tips_top">用户名：</span>
					<input type="text" id="u_name" placeholder="请输入用户名" class="reg_into">
					<span id="msg_name" class="tips_down"></span>
				</div>
				<div class="reg_input">
					<span class="tips_top">密码：</span>
					<input type="text" id="u_pwd" placeholder="请输入密码" class="reg_into">
					<span id="msg_pwd" class="tips_down"></span>
				</div>
				<div class="reg_input">
					<span class="tips_top">确认密码：</span>
					<input type="text" placeholder="请再次输入密码" id="Ypwd" class="reg_into">
					<span id="msg_Ypwd" class="tips_down"></span>
				</div>
				<div class="reg_input">
					<span class="tips_top">电话：</span>
					<input type="text" placeholder="请输入电话" id="uphone" class="reg_into">
					<span id="msg_phone" class="tips_down"></span>
				</div>
				<div class="reg_input">
					<span class="tips_top">邮箱：</span>
					<input type="text" placeholder="请输入邮箱" id="uemail" class="reg_into">
					<span id="msg_email" class="tips_down"></span>
				</div>
				<div class="reg_btn">
					<input type="button" id="btn" value="提交注册信息" class="btn">
				</div>
			</div>
			<div class="back"></div>
		</div>
		<div id="reg_alert"></div>
		<script type="text/javascript" src="../../MS_product/public/js/reg.js"></script>
	</body>
</html>
